<template>
  <div>
    <Page auto-content-height>
      <Grid>
        <!-- 表格操作 -->
        <template #action="{ row }">
          <el-button
            :icon="Edit"
            link
            type="primary"
            @click="EditHandle(row)"
          />
          <el-button :icon="Delete" link type="danger" />
        </template>
        <!-- 使用 toolbar-buttons 插槽添加自定义按钮 -->
        <template #toolbar-buttons>
          <el-button class="ml-auto" type="primary" @click="addOauth">
            {{ $t('sys.oauth.addProvider') }}
          </el-button>
        </template>
      </Grid>
    </Page>
    <!-- 弹窗框 -->
    <Drawer class="w-[35%]" />
  </div>
</template>

<script setup lang="tsx">
import { Page, useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { Delete, Edit } from '@element-plus/icons-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getOauthProviderList } from '#/api/sys/oauthProvider';
import { useTable } from '#/hooks/usetable';

import ExtraDrawer from './components/drawer.vue';

// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});
// 表格获取数据
const getOauthProviderData = async (params: any) => {
  const { page = 1, pageSize = 5 } = params;
  const res: any = await getOauthProviderList({ page, pageSize });
  return {
    total: res.total,
    items: res.data,
  };
};

// 表格配置项
const { tableconfig } = useTable({
  columns: [
    {
      title: $t('sys.oauth.name'),
      field: 'name',
    },
    {
      title: $t('sys.oauth.clientId'),
      field: 'clientId',
    },
    // 创建时间
    {
      title: $t('sys.menu.createTime'),
      field: 'createTime',
      formatter: ['formatDate', 'yyyy-MM-dd'],
    },
    {
      title: $t('sys.menu.operation'),
      slots: { default: 'action' },
    },
  ],
  // 远程请求数据
  proxyConfig: {
    ajax: {
      query: async (page: any) => {
        const { currentPage, pageSize } = page.page;
        return await getOauthProviderData({ page: currentPage, pageSize });
      },
    },
  },
});
// 表格实例
const [Grid] = useVbenVxeGrid({
  gridOptions: tableconfig.value,
});

const addOauth = () => {
  drawerApi.setState({ title: $t('sys.oauth.addProvider') });
  drawerApi.setData({ type: 'addData' });
  drawerApi.open();
};
const EditHandle = (row: any) => {
  drawerApi.setState({ title: $t('sys.oauth.editProvider') });
  drawerApi.setData({ type: 'editData', id: row.id });
  drawerApi.open();
};
</script>
